<template>
    <div class="row">
        <div class="row-bor">
            <div class="card" v-show="info.users.length" v-for="user in info.users" :key="user.login">
            <a href="use.html.url" target="_blank">
                <img src="user.avatar_url" style='width:100px'>
            </a>
            <p class="card-text">{{user.login}}</p>
            </div>
            <h1 v-show="info.isFirst">Welcome to Users</h1>
            <h1 v-show="info.isLoading">Loading.......</h1>
            <h1 v-show="info.errMsg">{{info.errMsg}}</h1>
        </div>
    </div>
</template>

<script>
 
//export default默认暴露，export分别暴露，export{}最后写，统一暴露
export default {   //一般用默认暴露
    // 指定标签名
    name:'List',
    data() {
        return {
            info:{
                isFirst:true,
                isLoading:false,
                errMsg:'',
                users:[]
            }
        }
    },     
    mounted() {
        // 绑定全局事件总线 
        this.$bus.$on('updatalist',(dataobj)=>{
            console.log('我是list组件，我收到了数据')
            this.info = {...this.info,...dataobj}    //根据第二个参数合并对象，
        })
    },
}

</script>

<style scoped>
    /*                                                                                                                                                                                                                                                                                                                                                                                                        m */
    .album{
        min-height: 50rem;
        padding: 3rem 0;
        background-color: #f7f7f7;
    }
    .card{
        float: left;
        width: 33%;
        padding: .75rem;
        margin-bottom: 2rem;
        border: 1px solid #efefef;
        text-align: center;
    }
    .card > img{
        margin-bottom: .75rem;
        border-radius: 100px;
    }
    .card-text{
        font-size: 85%;
    }
</style>